<!--
 * @Author: cjy
 * @Date: 2020-11-10 16:51:11
-->
<template>
  <div class="vm">
    <h2 class="h-title"> </h2>
    <div id="map" class="map-x"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import * as control from 'ol/control'

export default {
  name: 'FirstMap',
  data () {
    return {
      map: null
    }
  },
  methods: {
    initMap () {
      this.map = new Map({
        controls: control.defaults({ zoom: false}),
        target: "map", 
        layers: [ 
          new Tile({
            source: new XYZ({ //http://t0.tianditu.gov.cn/img_c/wmts
            //   url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              url: 'http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            }),
          }),
          new Tile({
            source: new XYZ({
              url: 'http://t6.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            })
          })
      
        ],
        view: new View({ 
          projection: "EPSG:4326",
          center: [110.064839, 32.548857], 
          // minZoom:10, 
          zoom: 5 
        })
      })
    },





  },
  mounted () {
    this.initMap();


  }
}
</script>

<style lang="scss" scoped>
  
</style>